<template>
	<view class="page">
		<block v-if="isdata">
			<view class="u-pa1 fix-titlenview-trans">
				<view class="m-banner-ad">
					<swiper indicator-dots="true" autoplay="true" interval="3000" duration="300">
						<swiper-item>
							<image lazy-load class="slide-image" mode="aspectFill" :src="activityInfo.activity_rule.giftbag_zu_image" :data-src="activityInfo.activity_rule.giftbag_zu_image" @click="previewProductImg" />
						</swiper-item>
					</swiper>
					<navigator v-if="activityInfo.activity_rule.activity_video" :url="activityInfo.activity_rule.activity_video" class="video">
						<image lazy-load src="/static/images/play.png" style="width:100rpx;height:100rpx"></image>
					</navigator>
				</view>

				<view class="m-activity-info">
					<view class="m-activity-title">
						<label>{{(activityInfo.activity_rule.activity_bag_category)}}</label>
					</view>
					<view class="m-activity-tips">
						<label>{{(activityInfo.activity_base.activity_title)}}</label>
					</view>
					<view class="m-activity-price">
						<view>
							<label style="color:#c0a080;">{{ __('￥') }}{{ number_format(activityInfo.activity_rule.giftbag_amount, 2) }}</label>
							<label class="old-price" v-if="(activityInfo.activity_rule.giftbag_amount < activityInfo.activity_rule.subtotal)">{{ __('￥') }}{{ number_format(activityInfo.activity_rule.subtotal, 2) }}</label>
						</view>
						<!-- <view>
							<label class="m-imfo-sp-selext">
								<view class="u-cart-num">
									<view class="u-num-btn" @click.stop="sub">-</view>
									<input type="number" v-model="numval" @blur="writenum" />
									<view class="u-num-btn" @click.stop="add">+</view>
								</view>
							</label>
						</view> -->
					</view>
				</view>

				<view class="product-l">
					<navigator url="/activity/giftbag/list" class="m-cell m-cell-access">
						<view class="m-cell-bd m-cell-primary">
							<p>{{__('礼包包含以下商品')}}</p>
						</view>
						<text class="ft-title">{{__('更多礼包')}}</text><text class="m-cell-ft"></text>
					</navigator>
					<scroll-view class="scroll-view_H" scroll-x="true">
						<block v-if="(activityInfo.items)">
							<view class="scroll-view-item_H" v-for="(item,index) in activityInfo.items" :key="index">
								<view>
									<view hover-class="none" :data-pid="(item.item_id)" :data-state="(item.product_state_id)" @click="gotoDetail">
										<view class="product-l-img">
											<image style="width:100%;height:100%" :src="item.product_image" />
										</view>

										<view class="product-l-price">
											<view class="product_name">
												<label>{{item.product_name}}</label>
											</view>
											<view class="price-new" style="color:#c0a080;">
												<label>{{ __('￥') }}{{ number_format(item.item_unit_price, 2) }}</label>
												<label style="margin-left: 10rpx">x {{ (item.activity_item_num) }}</label>
											</view>
										</view>
									</view>
								</view>
							</view>
						</block>
						<block v-else>
							<view class="m-nullpage-middle">
								<view class="m-null-tip">
									<text>{{ __('什么都没有！') }}</text>
								</view>
							</view>
						</block>
					</scroll-view>
				</view>
				<!--
				<view class="m-cell m-cell-access " style="background-color:  #FFFFFF;;">
					<view class="m-info-sp">
						<label class="m-info-tip" style="float:left;">{{__('库存：')}}{{activityInfo.activity_rule.giftbag_quantity}}</label>

						<label class="m-imfo-sp-selext" style="float:left;height: 48rpx;margin-left: 30rpx;">
							<view class="u-cart-num">
								<view class="u-num-btn" @click.stop="sub">-</view>
								<input type="number" v-model="numval" @blur="writenum" />
								<view class="u-num-btn" @click.stop="add">+</view>
							</view>
						</label>

					</view>
				</view> -->

				<view class="m-panel m-panel-access m-detail">
					<view class="m-tab">
						<view class="m-navbar">
							<view class="m-navbar-item m-navbar-item-on" v-if="(activityInfo.activity_base.activity_remark)">
								{{__('活动详情')}}
							</view>
						</view>
					</view>
					<view class="m-RichText" v-if="activityInfo.activity_base.activity_remark">
						<wxParse :content="activityInfo.activity_base.activity_remark" />
					</view>
				</view>
				<view style="width:100%;height:100rpx;"></view>
			</view>



			<view class="m-footer-btn m-fg-btn">
				<view class="m-footer-btn-list" style="width:100%">
					<!-- <view class="m-footer-btn-item" style="width:92rpx;">
						<view class="u-go-home1" @click="onShareBox">
							<view class="m-footer-btn-icon">
								<image src="../../static/images/share.png"/>
							</view>
							<text style="font-size: 20rpx;">{{__('分享')}}</text>
						</view>
					</view> -->
					<block v-if="(activityInfo.activity_state == 0)">
						<view class="m-footer-btn-main m-footer-desable" style="width: 100%;">
							{{__('活动未开启')}}
						</view>
					</block>
					<block v-else>
						<view v-if="false" class="m-footer-btn-main" style="background:linear-gradient(to right, #dbc4aa, #ba9877);" @click="ckselectsp">
							{{__('加入购物车')}}
						</view>
						<view class="m-footer-btn-main m-footer-desable" v-if="((activityInfo.activity_rule.giftbag_quantity - activityInfo.activity_effective_quantity) <= 0)">
							{{__('库存不足')}}
						</view>
						<view class="m-footer-btn-main" style="background-color: #333959;" v-else @click="goCheckout">
							{{__('立即购买')}}
						</view>
					</block>

				</view>


			</view>
		</block>
		<view class="m-nullpage" v-else>
			<view class="m-nullpage-middle" v-if="loaded">
				<label class="iconfont icon-meiyougengduo"></label>
				<view class="m-null-tip">
					<text>{{ __('什么都没有！') }}</text>
				</view>
			</view>
			<view class="m-nullpage-middle" v-else>
				<loading></loading>
			</view>
		</view>

		<!-- #ifdef APP-PLUS -->
		<share-box-app :shareDataDefault="shareData" ref="shareBoxApp"></share-box-app>
		<!-- #endif -->

		<!-- #ifdef H5 -->
		<share-box-h5 :shareDataDefault="shareData" ref="shareBoxH5"></share-box-h5>
		<!-- #endif -->

		<!-- #ifndef APP-PLUS -->
		<share-box-mp :shareDataDefault="shareData" @cancelShare="cancelShare" @showCodeImg="showCodeImg" @shareQRCode="shareQRCode" @saveImg="saveImg" ref="shareBoxMp"></share-box-mp>
		<!-- #endif -->

		<liu-customize-sel ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault" @change='onDistrictConfirm'></liu-customize-sel>

		<!-- <quick-nav @onReturnTop="onReturnTop" @onShareBox="onShareBox" :isquicknav="isquicknav"></quick-nav> -->
	</view>
</template>

<script>
	function getNowFormatDate() {
		var e = new Date(),
			t = '-',
			n = e.getMonth() + 1,
			r = e.getDate();
		n >= 1 && n <= 9 && (n = '0' + n), r >= 0 && r <= 9 && (r = '0' + r);
		var i = e.getFullYear() + t + n + t + r;
		return i;
	}

	import wxParse from '@/components/u-parse/u-parse.vue';

	import shareBoxMp from '../../components/share-box-mp.vue';
	import shareBoxApp from '../../components/share-box-app.vue';
	import shareBoxH5 from '../../components/share-box-h5.vue';

	import quickNav from '../../components/quick-nav.vue';
	import headerNavMenu from '../../components/header-nav-menu.vue';

	import uniBadge from '../../components/uni-badge.vue';
	import uniTag from '@/components/uni-tag/uni-tag.vue';
	import loading from '@/components/loading.vue';

	var intervalDate;
	var intervalPt;
	var intervalCt;
	var intervalTimeAct;

	import {
		mapState,
		mapMutations
	} from 'vuex';

	export default {
		data() {
			return {
				options: {},
				activity_id: 0,
				activityInfo: {
					items: [],
					activity_base: {},
					activity_rule: {}
				},
				loaded: true,
				isdata: false,

				numval: 1,
				stock: 1,
				inputval: 1,

				scposition: 0,
				old: {
					scposition: 0
				},

				shareData: {
					shareText: 'GDF商城系统，支持原生App、微信小程序，邀请你一起体验！',
					shareTitle: 'GDF商城系统，支持原生App、微信小程序，邀请你一起体验！',
					href: 'https://www.suteshop.com',
					image: '',
					price: 0
				},

				cityPickerValueDefault: [0, 0, 0],
				themeColor: '#007AFF',
				product_freight_info: {
					content: '无货',
					district_info: '上海市/上海市',
					if_store: false
				},

				latitude: '',
				longitude: '',

				ispage: true,

				uid: 0,

				isquicknav: false
			};
		},

		components: {
			shareBoxMp,
			shareBoxApp,
			shareBoxH5,
			quickNav,
			uniBadge,
			wxParse,
			uniTag,
			loading,
			headerNavMenu
		},
		computed: {
			...mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin', 'cartNum'])
		},
		onLoad: function(options) {
			uni.setNavigationBarTitle({
				title: this.__('礼包详情')
			});

			var that = this;

			if (options.aid) {
				this.setData({
					activity_id: options.aid
				});
				that.initData();
			}

			if (options.uid) {
				this.setData({
					uid: options.uid
				});

				if (this.hasLogin) {}

			}
		},

		methods: {
			...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo', 'setCartNum']),
			initData: function(options) {
				var that = this;
				var params = {
					activity_id: this.activity_id
				};

				that.$.request({
					url: that.Config.URL.marketing.getActivityInfo,
					data: params,
					success: function(data, status, msg, code) {
						if (200 == status) {
							const activityBase = data.activity_base;
							let info = {};
							info["items"] = data.items
							info["activity_base"] = activityBase;

							const activity_rule = JSON.parse(data.activity_base.activity_rule);
							info["activity_rule"] = activity_rule.giftbag;

							let subtotal = 0;
							//计算商品原价小计
							for (var i = 0; i < data.items.length; i++) {
								subtotal = subtotal + data.items[i]['item_unit_price'] * data.items[i]['activity_item_num'];
							}

							if (activityBase.activity_type_id == that.StateCode.ACTIVITY_TYPE_GIFTBAG) {
								info["activity_rule"].subtotal = subtotal;
							}

							that.setData({
								isdata: true,
								ispage: true,
								loaded: true,
								activityInfo: info
							});
						} else {
							that.setData({
								flag: false,
								ispage: true
							});
						}
					}
				});
			},
			ckselectsp: function(e) {
				var that = this;

				var pat = [];

				if (that.activityInfo.activity_rule.giftbag_quantity <= 0) {
					uni.showModal({
						title: '提示',
						content: '当前套餐库存不足，看看别的吧！',
						success: res => {
							uni.navigateTo({
								url: "/activity/giftbag/list"
							})
						}
					});
					return false;
				}

				for (let i in that.activityInfo.activity_rule.item_quantitys) {
					pat.push({
						item_id: i,
						quantity: that.activityInfo.activity_rule.item_quantitys[i]
					})
				}

				var params = {
					par: JSON.stringify(pat),
					prd: that.options.pid,
					activity_id: this.activity_id
				};

				that.$.request({
					url: that.Config.URL.cart.batchadd,
					data: params,
					success: function(data, status, msg, code) {
						if (200 == status) {
							uni.showModal({
								title: '提示',
								content: '加入购物车成功！',
								success: res => {
									uni.switchTab({
										url: "../../pages/cart/cart"
									})
								}
							});
						} else {
							uni.showModal({
								title: '提示',
								content: '加入购物车失败！',
								success: res => {}
							});
						}
					}
				});
			},

			gotoDetail: function(e) {
				console.log(e)
				var state = e.currentTarget.dataset.state
				var pid = e.currentTarget.dataset.pid

				if (state == this.StateCode.PRODUCT_STATE_OFF_THE_SHELF) {
					this.$.alert(this.__('此商品不可单独购买'))
				} else {
					this.$.navigateTo({
						url: "/pagesub/product/detail?id=" + pid
					})
				}
			},

			goCheckout: function() {
				var that = this;
				var items = that.activityInfo.items;

				var pat = [];

				for (var i in items) {
					if (items[i]) {
						var t = items[i].item_id + '|' + items[i].activity_item_num + '|0'
						pat.push(t)
					}
				}

				var str = pat.join(',');

				that.$.navigateTo({
					url: "/pagesub/checkout/checkout?ifcart=0&cart_id=" + str + "&activity_id=" + that.activity_id
				})

			},
			sub: function() {
				this.unifiedNum(2)
			},
			add: function() {
				this.unifiedNum(1)
			},
			writenum: function(e) {
				this.setData({
					inputval: e.detail.value
				}), this.unifiedNum(3)
			},
			unifiedNum: function(e) {
				let that = this;
				var t = {
					value: parseInt(this.numval),
					stock: parseInt(this.activityInfo.activity_rule.giftbag_quantity),
					inputval: parseInt(this.inputval)
				};
				if (t.stock <= 0) {
					that.$.alert(that.__('亲~商品没有库存啦！'));
					return
				}
				e == 1 ? t.value = t.value + 1 : e == 2 ? t.value = t.value - 1 : (t.value = t.inputval, this.setData({
					numval: t.inputval
				}));
				if (t.value > t.stock) {
					this.setData({
						numval: t.stock
					});
					return
				}
				if (t.value <= 0) {
					this.setData({
						numval: 1
					});
					return
				}
				this.setData({
					numval: t.value
				})
			},

			previewProductImg: function(e) {
				var that = this,
					n = [];

				n.push(this.activityInfo.activity_rule.giftbag_zu_image);


				var i = e.target.dataset.src;

				that.$.previewImage({
					current: i,
					urls: n
				})
			},

			cancelShare: function(e) {},
			showCodeImg: function(e) {},
			shareQRCode: function(e) {},
			saveImg: function(e) {},

			onShareBox: function(e) {
				let that = this;
				var $href = that.$.sprintf('%s/tmpl/product_detail.html?item_id=%d&FX=%d', this.Config.WapSiteUrl, this.skuid, this.userInfo
					.user_id);

				$href = that.$.sprintf('%s/h5/activity/giftbag/detail?aid=%d&uid=%d', that.Config.SiteUrl, this.activity_id, this.userInfo.user_id);
				// 如允许点击超链接跳转，则应该打开一个新页面，并传入href，由新页面内嵌webview组件负责显示该链接内容
				// #ifdef APP-PLUS

				// #endif

				// #ifdef MP-WEIXIN
				$href = "/activity/giftbag/detail?aid=" + this.activity_id + "&uid=" + this.userInfo.user_id;
				// #endif

				this.setData({
					shareData: {
						shareTitle: this.activityInfo.activity_name,
						shareText: this.activityInfo.activity_title,
						href: $href,
						image: this.activityInfo.activity_rule.giftbag_image,
						price: this.number_format(this.activityInfo.activity_rule.giftbag_amount, 2)
					}
				});

				// 如允许点击超链接跳转，则应该打开一个新页面，并传入href，由新页面内嵌webview组件负责显示该链接内容
				// #ifdef APP-PLUS
				this.$refs.shareBoxApp.show();
				// #endif

				//海报
				if (e == 3) {
					// #ifndef APP-PLUS
					this.$refs.shareBoxMp.show();
					// #endif
				} else {
					// #ifdef H5
					if (that.$.ifUniApp()) {
						this.$refs.shareBoxH5.show();
					} else {
						this.$refs.shareBoxMp.show();
					}
					// #endif
				}




			},
		}
	};
</script>

<style lang="scss">
	@import '../../styles/_variables.scss';

	.page-body {
		padding: 40rpx;


		button {
			margin: 20rpx 20rpx;
		}

		.m-panel-sp-icon {
			position: absolute;
			right: 20rpx;
			top: 10rpx;
		}
	}

	.fix-titlenview-trans {
		background: #F5F6F7;
	}

	.m-banner-ad {
		width: 100%;
		height: 640rpx;
		background: rgba(0, 0, 0, 0);
		opacity: 1;

		position: relative;
	}

	.m-banner-ad swiper {
		width: 100%;
		height: 100%;
	}

	.slide-image {
		width: 100%;
		height: 100%;
	}

	.m-activity-info {
		// width: 100%;
		//height: 140rpx;
		background: #FFFFFF;
		opacity: 1;
		padding: 20rpx 24rpx;
	}

	.m-panel {
		margin-top: 0;
	}

	.m-activity-title {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 42rpx;
		color: #002951;
		opacity: 1;

		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

	}

	.m-activity-tips {
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 28px;
		color: #002951;
		opacity: 0.6;

		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

	}

	.m-activity-price {
		font-size: 34rpx;
		font-family: Arial;
		font-weight: 400;
		line-height: 34rpx;
		color: #FF4142;
		opacity: 1;
		margin-top: 12rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;

	}


	.product-l {
		// width: 710rpx;
		height: 434rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 8rpx;
		margin: 20rpx;
		overflow: hidden;
		border-radius: 10rpx;


	}

	.scroll-Y {
		height: 300rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		height: 344rpx;
	}

	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 240rpx;
		height: 344rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 16rpx;
		margin-right: 24rpx;

	}

	.m-cell {
		padding: 20rpx 20rpx;
	}

	.m-cell-primary {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 36rpx;
		color: #AF6419;
		opacity: 1;

	}

	.m-cell-access .m-cell-ft:after {
		border-color: #AF6419;
	}

	.ft-title {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 32rpx;
		color: #AF6419;
		opacity: 1;
		margin-right: 10rpx;

	}


	.product-l-img {
		width: 240rpx;
		height: 240rpx;
		background: rgba(0, 0, 0, 0);
		opacity: 1;
		border-radius: 16rpx 16rpx 0rpx 0rpx;

	}

	.product-l-price {
		width: 208rpx;
		height: 88rpx;
		background: rgba(255, 255, 255, 1);
		padding: 8rpx 16rpx;

		.product_name {
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 28rpx;
			color: #002951;
			opacity: 1;


			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.m-project-tips {
			height: 18rpx;
			font-size: 12px;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 18rpx;
			color: #002951;
			opacity: 0.6;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			margin: 4rpx 0rpx;

		}

		.price-new {
			font-size: 12px;
			font-family: Arial;
			font-weight: 400;
			line-height: 34rpx;
			color: #FF4142;
			opacity: 1;

			padding: 5px 0;
		}
	}


	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		margin-left: 24rpx;
	}

	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		/* height: 260rpx; */
		// line-height: 300rpx;
		// text-align: center;
		font-size: 36rpx;
	}

	.m-info-sp {
		width: 710rpx;
		height: 48rpx;
		background: #F5F6F7;
		opacity: 1;
		border-radius: 8rpx;
		padding: 0
	}

	.u-cart-num {
		margin-top: 0rpx;
		// height: 100%;
		line-height: 48rpx;

		width: 56px;
		height: 18px;





		background: #FFFFFF;
		border: 1px solid #F5F6F7;
		opacity: 1;
		border-radius: 2px;

	}

	.u-num-btn {
		background: #FFFFFF;
		opacity: 1;
		border-radius: 4rpx;
		width: 22rpx;
		height: 30rpx;
		line-height: 1;

		border: 1px solid #F5F6F7;

	}

	.m-footer-btn-main {
		width: 100%;
		height: 92rpx;
		background: #DB384C;
		opacity: 1;
		line-height: 92rpx;


		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		// letter-spacing: 40rpx;
		opacity: 1;


	}

	.m-footer-btn-item {
		width: 92rpx;
		height: 92rpx;
	}

	/*底部按钮 start*/
	.m-footer-btn {
		height: 92rpx;
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		text-align: center;
		z-index: 3;
	}

	.m-footer-btn-list {
		width: 50%;
		height: 100%;
		position: relative;
		float: left;
		display: flex;
	}

	.m-footer-btn-list::before {
		content: ' ';
		position: absolute;
		left: 0;
		top: -2rpx;
		right: 0;
		height: 2rpx;
		border-bottom: 2rpx solid #d5d5d5;
		color: #cccccc;
		-webkit-transform-origin: 0 100%;
		transform-origin: 0 100%;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		z-index: 3;
	}

	.m-footer-btn-item {
		position: relative;
		float: left;
		width: 33.3333333333333%;
		font-size: 24rpx;
		color: #888;
		line-height: 40rpx;
		padding: 15rpx 0;
		border-right: 1rpx solid #d5d5d5;
		box-sizing: border-box;
	}

	.m-footer-btn-item::last-child {
		border: none;
	}

	.m-footer-btn-icon {
		width: 40rpx;
		height: 40rpx;
		margin: 0 auto;
		position: relative;
	}

	.m-footer-btn-item image {
		width: 40rpx;
		height: 40rpx;
	}

	.m-footer-btn-item contact-button {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		opacity: 0;
	}



	.m-footer-desable {
		-webkit-filter: grayscale(1);
		filter: grayscale(1);
	}

	.u-go-home1 {
		height: 100%;
	}

	.video {
		position: absolute;
		bottom: 40rpx;
		left: 44%;
	}

	.m-tab {
		margin-top: 6rpx;
	}


	.m-navbar-item.m-navbar-item-on {
		background-color: #FFFFFF;
		text-align: center;
	}

	.old-price {
		color: #888;
		margin-left: 5px;
		text-decoration: line-through;
		font-size: 13px;
	}












	/* share */
	.textarea-wrp {
		padding: 0 20rpx;
	}

	.page-section {
		margin-bottom: 20rpx;
	}

	.textarea {
		border: 2rpx solid #d8d8d8;
		padding: 10rpx;
		height: 90rpx;
		width: 690rpx;
	}

	.uni-input {
		border: 2rpx solid #d8d8d8;
		padding: 0 10rpx;
		width: 690rpx;
	}

	.m-detail {
		// padding:20rpx;
		margin: 20rpx;
		background: #F5F6F7;
		border-radius: 20rpx;
	}

	.m-panel:before {
		border-top: 0px solid #E5E5E5;
	}




	.u-cart-num uni-input {
		width: 48rpx;
		height: 36rpx;
		font-size: 26rpx;
	}


	.m-RichText {
		background: #fff;
		padding: 0 10px 10px;
	}
</style>